<!--代码逻辑和样式库-->
<script src="./data-list.component.js"></script>
<style src="./data-list.scss" scoped lang="scss"></style>

<template>
  <div>
    <!-- 搜索区域 -->
    <div v-if="codesCheck.indexOf('Query') !== -1" class="search-container">
      <el-form :inline="true" ref="searchCriteria" :model="searchCriteria" label-width="80px">
        <el-form-item prop="trueName" label="姓名:">
          <el-input v-model="searchCriteria.trueName" class="el-input-width" clearable />
        </el-form-item>
        <el-form-item label="性别:" prop="enumSex">
          <el-radio-group v-model="searchCriteria.enumSex" class="searchRadio">
            <el-radio label="男">男</el-radio>
            <el-radio label="女">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item prop="mobileNumber" label="联系方式:">
          <el-input v-model="searchCriteria.mobileNumber" class="el-input-width" clearable />
        </el-form-item>
        <el-form-item label="年龄:" prop="age">
          <el-input v-model="searchCriteria.age" class="el-input-width" clearable />
        </el-form-item>
        <el-form-item label="生日:" prop="birthday">
          <el-date-picker v-model="searchCriteria.birthday" value-format="yyyy-MM-dd" type="date" placeholder="选择日期" class="searchDate" />
        </el-form-item>
        <el-form-item label="收入评估:" prop="income">
          <el-select v-model="searchCriteria.income" placeholder="请选择" clearable>
            <el-option
              v-for="item in incomeTypes"
              :key="item.itemValue"
              :label="item.itemName"
              :value="item.itemValue">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="家庭状况:" prop="family">
          <el-input v-model="searchCriteria.family" class="el-input-width" clearable />
        </el-form-item>
        <el-form-item label="职业工作:" prop="positionName">
          <el-input v-model="searchCriteria.positionName" class="el-input-width" clearable />
        </el-form-item>
        <el-form-item label="居住区域:" prop="liveAddress">
          <el-input v-model="searchCriteria.liveAddress" class="el-input-width" clearable />
        </el-form-item>
        <el-form-item label="生活区域:" prop="lifeAddress">
          <el-input v-model="searchCriteria.lifeAddress" class="el-input-width" clearable />
        </el-form-item>
        <el-form-item label="现住小区:" prop="nowHouse">
          <el-input v-model="searchCriteria.nowHouse" class="el-input-width" clearable />
        </el-form-item>
        <el-form-item label="到访项目:" prop="visitProject">
          <el-input v-model="searchCriteria.visitProject" class="el-input-width" clearable />
        </el-form-item>
        <el-form-item label="到访日期:" prop="visitDate">
          <el-date-picker v-model="searchCriteria.visitDate" value-format="yyyy-MM-dd" type="date" placeholder="选择日期" class="searchDate" />
        </el-form-item>
        <el-form-item label="录入日期:" prop="recordDate">
          <el-date-picker v-model="searchCriteria.recordDate" value-format="yyyy-MM-dd" type="date" placeholder="选择日期" class="searchDate" />
        </el-form-item>
        <el-form-item label="置业顾问:" prop="counselor">
          <el-input v-model="searchCriteria.counselor" class="el-input-width" clearable />
        </el-form-item>
        <el-form-item label="成交项目:">
          <el-input v-model="searchCriteria.dealProject" class="el-input-width" clearable />
        </el-form-item>
        <el-form-item label="成交房号:">
          <el-input v-model="searchCriteria.dealRoom" class="el-input-width" clearable />
        </el-form-item>
        <el-form-item label="成交面积:">
          <el-input v-model="searchCriteria.dealArea" class="el-input-width" clearable />
        </el-form-item>
        <el-form-item label="成交日期:">
          <el-date-picker v-model="searchCriteria.dealDate" value-format="yyyy-MM-dd" type="date" placeholder="选择日期" class="searchDate" />
        </el-form-item>
        <el-form-item label="备注:">
          <el-input v-model="searchCriteria.remark" class="el-input-width" clearable />
        </el-form-item>
      </el-form>

      <el-form label-position="top">
        <el-row type="flex">
          <el-col :span="24" class="aq-vertical-middle">
            <el-button v-if="codesCheck.indexOf('Query') !== -1" type="primary" icon="el-icon-search" class="aq-margin-left-4" @click="search()">
              查询
            </el-button>
            <el-button v-if="codesCheck.indexOf('Query') !== -1" type="warning" icon="el-icon-refresh" @click="reset()">
              重置
            </el-button>
            <el-button v-if="codesCheck.indexOf('Create') !== -1" type="success" icon="el-icon-edit" @click="openEditDialog('create')">
              创建
            </el-button>
            <el-button v-waves v-if="codesCheck.indexOf('Delete') !== -1" type="danger" icon="el-icon-delete" @click="deleteSelectedData()">
              批量删除
            </el-button>
            <el-button v-if="codesCheck.indexOf('Export') !== -1" type="primary" icon="el-icon-paperclip" @click="handleDownload">
              导出
            </el-button>
            <el-upload v-if="codesCheck.indexOf('Import') !== -1" :action="file_url + 'api/sysSellerUser/readExcel'" :show-file-list="false" :on-success="handleImportSuccess" name="uploadFile" style="margin-left: 10px;">
              <el-button type="primary" icon="el-icon-upload2">
                导入
              </el-button>
            </el-upload>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <!-- 内容区域 -->
    <div class="content-container aq-margin-top-16">
      <!--用户列表table-->
      <el-table v-loading="loading" :data="data" border fit highlight-current-row @selection-change="handleSelectionChange" @sort-change="sortColumn">
        <el-table-column type="selection" width="55" align="center" fixed></el-table-column>
        <el-table-column align="center" width="75" fixed label="序号">
          <template slot-scope="scope">
            <span>{{ (scope.$index + 1)+ (pageNum -1 )*recordNum }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="trueName" label="姓名" width="120px" fixed="left" sortable="custom" />
        <el-table-column prop="mobileNumber" label="联系方式" width="120px" fixed="left" sortable="custom" />
        <el-table-column prop="enumSex" label="性别" align="center" width="80px" />
        <el-table-column prop="age" label="年龄" width="80px" />
        <el-table-column prop="birthday" label="生日" width="100px" :show-overflow-tooltip="true" />
        <el-table-column prop="income" label="收入评估" width="120px" :formatter="formatIncome" />
        <el-table-column prop="positionName" label="职业工作" width="100px" :show-overflow-tooltip="true" />
        <el-table-column prop="visitProject" label="到访项目" width="150px" :show-overflow-tooltip="true" />
        <el-table-column prop="visitDate" label="到访日期" width="100px" />
        <el-table-column prop="recordDate" label="录入日期" width="100px" />
        <el-table-column prop="counselor" label="置业顾问" width="120px" />
        <el-table-column prop="family" label="家庭状况" width="150px" :show-overflow-tooltip="true" />
        <el-table-column prop="liveAddress" label="居住区域" width="150px" :show-overflow-tooltip="true" />
        <el-table-column prop="lifeAddress" label="生活区域" width="150px" :show-overflow-tooltip="true" />
        <el-table-column prop="nowHouse" label="现住小区" min-width="150px" max-width="300px" :show-overflow-tooltip="true" />
        <el-table-column prop="dealProject" label="成交项目" min-width="150px" max-width="300px" :show-overflow-tooltip="true" />
        <el-table-column prop="dealRoom" label="成交房号" min-width="150px" max-width="300px" :show-overflow-tooltip="true" />
        <el-table-column prop="dealArea" label="成交面积" min-width="150px" max-width="300px" :show-overflow-tooltip="true" />
        <el-table-column prop="dealDate" label="成交日期" min-width="150px" max-width="300px" :show-overflow-tooltip="true" />
        <el-table-column prop="remark" label="备注" min-width="150px" max-width="300px" :show-overflow-tooltip="true" />

        <el-table-column prop="text" label="操作" width="150px" align="center" fixed="right">
          <template slot-scope="scope">
            <el-link v-if="codesCheck.indexOf('Edit') != -1" icon="el-icon-edit" type="primary" @click="openEditDialog('edit', scope.row)">编辑</el-link>
            <el-link class="aq-margin-left-16" v-if="codesCheck.indexOf('Delete') != -1" icon="el-icon-delete" size="mini" type="danger" @click="deleteSelectedData(scope.row.objectId)">删除</el-link>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页插件 -->
      <pagination v-show="totalNum > 0" :total="totalNum" :page.sync="pageNum" :limit.sync="recordNum" @pagination="getDataList" />
    </div>

    <!-- 创建/编辑信息弹窗开始 -->
    <el-dialog :title="dialogTitle" :visible.sync="editDialogVisible" width="800px">
      <el-form ref="dataForm" :rules="editRules" :model="editForm" label-position="left" label-width="110px">
        <el-row :gutter="30">
          <el-col :xs="24" :sm="24" :md="12">
            <el-form-item prop="trueName" label="姓名:">
              <el-input v-model="editForm.trueName" class="el-input-width" clearable />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="12">
            <el-form-item label="性别:" prop="enumSex">
              <el-radio-group v-model="editForm.enumSex">
                <el-radio label="男">男</el-radio>
                <el-radio label="女">女</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="12">
            <el-form-item prop="mobileNumber" label="联系方式:">
              <el-input v-model="editForm.mobileNumber" class="el-input-width" clearable />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="12">
            <el-form-item label="年龄:" prop="age">
              <el-input v-model="editForm.age" class="el-input-width" clearable />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="12">
            <el-form-item label="生日:" prop="birthday">
              <el-date-picker v-model="editForm.birthday" value-format="yyyy-MM-dd" type="date" placeholder="选择日期" />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="12">
            <el-form-item label="收入评估:" prop="income">
              <el-select v-model="editForm.income" placeholder="请选择" clearable>
                <el-option
                  v-for="item in incomeTypes"
                  :key="item.itemValue"
                  :label="item.itemName"
                  :value="item.itemValue">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="12">
            <el-form-item label="家庭状况:" prop="family">
              <el-input v-model="editForm.family" class="el-input-width" clearable />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="12">
            <el-form-item label="职业工作:" prop="positionName">
              <el-input v-model="editForm.positionName" class="el-input-width" clearable />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="12">
            <el-form-item label="居住区域:" prop="liveAddress">
              <el-input v-model="editForm.liveAddress" class="el-input-width" clearable />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="12">
            <el-form-item label="生活区域:" prop="lifeAddress">
              <el-input v-model="editForm.lifeAddress" class="el-input-width" clearable />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="12">
            <el-form-item label="现住小区:" prop="nowHouse">
              <el-input v-model="editForm.nowHouse" class="el-input-width" clearable />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="12">
            <el-form-item label="到访项目:" prop="visitProject">
              <el-input v-model="editForm.visitProject" class="el-input-width" clearable />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="12">
            <el-form-item label="到访日期:" prop="visitDate">
              <el-date-picker v-model="editForm.visitDate" value-format="yyyy-MM-dd" type="date" placeholder="选择日期" />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="12">
            <el-form-item label="录入日期:" prop="recordDate">
              <el-date-picker v-model="editForm.recordDate" value-format="yyyy-MM-dd" type="date" placeholder="选择日期" />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="12">
            <el-form-item label="置业顾问:" prop="counselor">
              <el-input v-model="editForm.counselor" class="el-input-width" clearable />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="12">
            <el-form-item label="成交项目:">
              <el-input v-model="editForm.dealProject" class="el-input-width" clearable />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="12">
            <el-form-item label="成交房号:">
              <el-input v-model="editForm.dealRoom" class="el-input-width" clearable />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="12">
            <el-form-item label="成交面积:">
              <el-input v-model="editForm.dealArea" class="el-input-width" clearable />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="12">
            <el-form-item label="成交日期:">
              <el-date-picker v-model="editForm.dealDate" value-format="yyyy-MM-dd" type="date" placeholder="选择日期" />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="12">
            <el-form-item label="备注:">
              <el-input v-model="editForm.remark" class="el-input-width" clearable />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row class="aq-margin-top-12">
          <el-col :xs="24" :sm="24" :lg="24" align="center">
            <el-button type="primary" class="action-btn" @click="save()">确定</el-button>
            <el-button class="action-btn" @click="editDialogVisible = false">取消</el-button>
          </el-col>
        </el-row>
      </el-form>
    </el-dialog>
  </div>
</template>
